<template>
  <!--<div class="login-container">-->
  <div>
    <div style="min-width: 1100px">
      <div class="licc-comment-filter-top">
        <el-form :model="filterConditions" ref="filterConditions"  label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item
                label="选择分值"
                prop="points">
                <el-select v-model="filterConditions.points" clearable placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label=添加时间>
                <el-date-picker
                  v-model="datePickerValue"
                  value-format="yyyy-MM-dd HH:mm:SS"
                  :picker-options="pickerOptions"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item
                label="商品编号"
                prop="goodsSn"
                :rules="[{trigger: 'blur', validator: validateGoodsSnRule}]">
                <el-input v-model="filterConditions.goodsSn" placeholder="请输入商品编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="订单编号"
                prop="orderSn"
                :rules="[{trigger: 'blur', validator: validateOrderSnOrPhoneRule}]">
                <el-input v-model="filterConditions.orderSn" placeholder="请输入订单编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="手机号"
                prop="phone"
                :rules="[{trigger: 'blur', validator: validateOrderSnOrPhoneRule}]">
                <el-input v-model="filterConditions.phone" placeholder="请输入评论人手机号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="2">
              <el-button type="info" @click="restCommentInfosButton">重 置</el-button>
              <el-button type="primary" @click="filterCommentInfosButton">筛 选</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div>
      <el-table
        :data="commentInfo"
        border
        style="width: 100%">
        <el-table-column type="index" width="30"></el-table-column>
        <el-table-column prop="goodsSn" label="商品编号"></el-table-column>
        <el-table-column prop="orderSn" label="订单编号"></el-table-column>
        <el-table-column prop="userPhone" label="评论人手机"></el-table-column>
        <el-table-column prop="commentsContent" label="评论内容"></el-table-column>
        <el-table-column prop="commentsPoints" label="评论分值"></el-table-column>
        <el-table-column prop="commentsLikeNum" label="赞数"></el-table-column>
        <el-table-column prop="createDate" label="评论时间">
          <template slot-scope="scope">
            {{timeStamp(scope.row.createDate)}}
          </template>
        </el-table-column>
        <el-table-column prop="commentsDisabled" label="是否显示">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.commentsDisabled"
              @change="commentsSwitchChange(scope.row)"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="100" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">商品详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[30, 50, 80, 100]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="commentTotal">
      </el-pagination>
    </div>
    <div>
      <el-dialog
        title="商品详情"
        :visible.sync="dialogGoodsInfoVisible"
        width="70%" style="text-align: left">
        <span>
          <goods-info v-if="dialogGoodsInfoVisible" :message="goodsInfoCheck"></goods-info>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogGoodsInfoVisible = false">返 回</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>

  import goodsApi from '@/api/backstage/goods'
  import GoodsInfo from '../components/goodsInfo'
  export default {
    name: 'Goods_listInfo',
    components: {
      GoodsInfo
    },
    data() {
      return {
        /**请求参数 **/
        params:{},
        /** 筛选条件 **/
        filterConditions:{},
        /** 选择评价级别 **/
        options: [
          {value: 1, label: '1星'},
          {value: 2, label: '2星'},
          {value: 3, label: '3星'},
          {value: 4, label: '4星'},
          {value: 5, label: '5星'}
          ],
        /** 日期选择器 **/
        datePickerValue:'',
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          }
        },
        /** 评论信息 **/
        commentInfo: [],
        currentPage: 1,
        pagesize:30,
        commentTotal:0,
        /** 订单详情显示 **/
        dialogGoodsInfoVisible: false,
        goodsInfoCheck:{},
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData(){
        goodsApi.getCommentInfo(this.params, this.currentPage, this.pagesize).then(res => {
          this.commentInfo = res.data.records;
          this.commentTotal = res.data.total;
        })
      },

      /** 分页---开始 **/
      handleSizeChange(val) {
        this.pagesize = val;
        this.initData();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.initData();
      },
      /** 分页---结束 **/
      /** 商品编号规则 **/
      validateGoodsSnRule(rule, value, callback){
        let loginNameRule = /^[a-zA-Z]([-_a-zA-Z0-9]{3,20})$/;
        if (typeof (value)=='undefined'||value===''){
          callback();
        }else if (!loginNameRule.test(value)) {
          callback(new Error('以字母开头，英文、数字、下划线和减号的4-20位字符组成'));
        } else {
          callback();
        }
      },
      /** 订单或手机号规则 **/
      validateOrderSnOrPhoneRule(rule, value, callback){
        let orderSNRule = /^[0-9]{3,20}$/;
        if (typeof (value)=='undefined'||value===''){
          callback();
        }else if (!orderSNRule.test(value)) {
          callback(new Error('只能由4-20数字组成'));
        } else {
          callback()
        }
      },
      /** 重置筛选信息 **/
      restCommentInfosButton(){
        this.params = {};
        this.currentPage = 1;
        this.pagesize =30;
        this.filterConditions = {};
        this.$nextTick(()=>{
          this.$refs['filterConditions'].clearValidate();
        })
        this.datePickerValue = null;
        this.initData();
      },
      /** 筛选信息 **/
      filterCommentInfosButton(){
        this.$refs['filterConditions'].validate(valid => {
          if (valid){
            /** 上传角色信息 **/
           this.params = {
             points: this.filterConditions.points,
             goodsSn: this.filterConditions.goodsSn,
             orderSn: this.filterConditions.orderSn,
             phone: this.filterConditions.phone,
             beginDate: this.datePickerValue[0],
             endDate: this.datePickerValue[1],
           }
           this.initData();
          } else {
            this.$notify({title: '提示', message: '输入的筛选信息中有不合规', type: 'warning'});
          }
        })
      },
      /** 评论显示变化时间 **/
      commentsSwitchChange(row){
        let content = (row.commentsDisabled === 1)?'该操作将会使该条评论在前台不显示，是否继续？':'该操作将会使该条评论在前台显示，是否继续？';
        this.$confirm(content, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            id:row.commentsId,
            disabled:row.commentsDisabled
          }
          goodsApi.updateCommentInfo(params).then(res => {
            this.$notify({title: '成功', message: "修改评论状态成功", type: 'success'});
          }).catch(() => {
            this.$notify.error({title: '失败', message: "评论状态修改失败"});
            row.commentsDisabled = (row.commentsDisabled === 1)?0:1;
          })
        }).catch(() => {
          /** 取消提交 **/
          row.commentsDisabled = (row.commentsDisabled === 1)?0:1;
          this.$notify.info({title: '取消', message: '已取消操作'});
        });
      },
      /** 详情页面 **/
      handleEdit(index,row){
        this.goodsInfoCheck = {
          id:row.commentsGoodsId,
          catId:row.catId
        };
        this.dialogGoodsInfoVisible = true;
      },
      /** 时间戳转换 **/
      timeStamp(time){
        if (time == null){
          return null;
        }
        var date = new Date(time);
        return date.toJSON().substr(0, 19).replace('T', ' ');
      }
    }
  }
</script>
<style>
  .licc-comment-filter-top{
    width: 100%;
    min-width: 1100px;
  }
</style>
